import * as React from "react"
import { View, Text, SectionList } from "react-native"
import { px2dp } from "@/utils"
import { color } from "@/theme"
import HomeItemHeadView from "screens/home-screen/HomeItemHeadView"
import HomeItemView from "screens/home-screen/HomeItemView"

interface HomeListViewInterface {
  data?: any
}

export default class HomeListView extends React.Component<HomeListViewInterface, {}> {
  data = this.props.data

  render() {
    return (
      <View
        style={{
          flex: 1,
          backgroundColor: color.palette.bgMain
        }}
      >
        <View
          style={{
            flexDirection: "row",
            marginTop: px2dp(16),
            marginBottom: px2dp(16),
            alignItems: "center"
          }}
        >
          <View
            style={{
              height: px2dp(15),
              width: px2dp(15),
              backgroundColor: color.palette.textBlue,
              marginStart: px2dp(15)
            }}
          />
          <Text
            style={{ color: color.palette.textBlue, fontSize: px2dp(16), marginStart: px2dp(7) }}
          >
            滚球
          </Text>
          <View
            style={{
              borderRadius: px2dp(20),
              backgroundColor: color.palette.red,
              marginStart: px2dp(4),
              paddingStart: px2dp(4),
              paddingEnd: px2dp(4)
            }}
          >
            <Text style={{ color: color.palette.white }}>0</Text>
          </View>
        </View>

        <SectionList
          style={{ flex: 1, marginStart: px2dp(4), marginEnd: px2dp(4), marginTop: px2dp(-4) }}
          renderItem={({ item, index, section }) => {
            console.log("item:" + item)
            console.log("index:" + index)
            console.log("section:" + section)
            return <HomeItemView />
          }}
          renderSectionHeader={info => {
            return <HomeItemHeadView item={info.section} />
          }}
          sections={[
            { title: "足球", data: ["item1", "item2"] },
            { title: "羽毛球", data: ["item3", "item4"] },
            { title: "篮球", data: ["item5", "item6"] }
          ]}
          keyExtractor={(item, index) => item + index}
        />
      </View>
    )
  }
}
